<template>
    <div :id="uuid" class="asoBtn">
        <slot></slot>
    </div>
</template>

<script>
import { v4 as uuidv4 } from "uuid";
export default {
    name: "AsoBtn",
    data() {
        return {
            uuid: "",
        };
    },
    created() {
        this.uuid = "a" + uuidv4();
    },
    mounted() {
        let that = this;
        let asoBtn = document.querySelector(`#${this.uuid}`);
        let cssdataset;
        for (const key in asoBtn.dataset) {
            cssdataset = key;
        }
        asoBtn.addEventListener("click", function (e) {
            let x = e.clientX - e.target.offsetLeft;
            let y = e.clientY - e.target.offsetTop;
            let ripples = document.createElement("span");
            // console.log(that.uuid);
            ripples.dataset[cssdataset] = "";
            ripples.style.left = x + "px";
            ripples.style.top = y + "px";
            this.appendChild(ripples);
            ripples.onanimationend = function () {
                ripples.remove();
            };
        });
    },
    methods: {},
};
</script>

<style scoped>
.asoBtn {
    display: inline-block;
    position: relative;
    margin: 10px 0;
    padding: 12px 36px;
    font-size: 18px;
    font-weight: bolder;
    color: whitesmoke;
    letter-spacing: 2px;
    border-radius: 10px;
    background: #333;
    overflow: hidden;
    cursor: pointer;
}
.asoBtn span {
    position: absolute;
    background-color: #fff;
    /* display: inline-block; */
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: animate 1s linear;
}
@keyframes animate {
    0% {
        height: 0px;
        width: 0px;
        opacity: 0.8;
    }
    100% {
        height: 300px;
        width: 300px;
        opacity: 0;
    }
}
</style>